<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
import {
  deleteDocumentById,
  deleteDocumentsByIds,
  downloadDocument,
  getUserDocuments,
  searchDocuments
} from "../../apis/DocumentApi.js";
import {useRoute} from "vue-router";
import {elPrompt} from "../../utils/elPrompt.ts";
import {Document} from "../../interfaces/Document.ts";
import showSize from "../../utils/showSize.js";

const documents = ref<Document[]>()
const pageNumber = ref(1)
const pageSize = ref(10)
const total = ref(10)
const pageSizes = computed(() => {
  const numberArray = [10]
  let maxPageSize = numberArray[0]
  while (maxPageSize < total.value) {
    maxPageSize += 10
    numberArray.push(maxPageSize)
  }
  return numberArray
})

const searchTitle = ref('')
const searchKeyword = ref('')
const searchUser = ref('')

function resetSearch() {
  searchTitle.value = ''
  searchKeyword.value = ''
  searchUser.value = ''
  loadData()
}

onMounted(() => {
  searchKeyword.value = <string>useRoute().query.searchKeyword ? <string>useRoute().query.searchKeyword : ''
  loadData()
})

function loadData() {
  searchDocuments(
      (result) => {
        if (result.status !== 200) return elPrompt(result.message, "error")
        documents.value = result.data['dataLists']
        total.value = result.data['total']
      },
      pageNumber.value,
      pageSize.value,
      searchUser.value,
      searchTitle.value,
      searchKeyword.value
  )
}

function previewDocument(documentId: number) {
  window.open(`/document/preview/${documentId}`, '_target')
}

let document: Document

const documentIds = ref<number[]>()

function selectDocument(documents: Document[]) {
  documentIds.value = []
  if (!(documents.length > 0)) return
  documents.forEach((item) => {
    documentIds.value?.push(item.id)
  })
}

function handleSizeChange(value: number) {
  pageNumber.value = 1
  pageSize.value = value
  loadData()
}

function handleCurrentChange(value: number) {
  pageNumber.value = value
  loadData()
}

function getIconClass(title: string) {
  const documentType = title.slice(title.lastIndexOf('.') + 1)
  const icon = {
    doc: 'iconfont icon-word',
    docx: 'iconfont icon-word',
    xls: 'iconfont icon-excel',
    xlsx: 'iconfont icon-excel',
    ppt: 'iconfont icon-ppt',
    pptx: 'iconfont icon-ppt',
    pdf: 'iconfont icon-pdf',
  }
  return icon[documentType]
}

function toUserDocuments(userId: number) {
  if (!userId) return
  window.open(`/document/user/${userId}`, '_target')
}
</script>

<template>
  <div class="operation">
    <el-input placeholder="用户" v-model="searchUser" @keydown.enter="loadData"/>
    <el-input placeholder="标题" v-model="searchTitle" @keydown.enter="loadData"/>
    <el-input placeholder="关键词" v-model="searchKeyword" @keydown.enter="loadData"/>
    <el-button @click="loadData">搜索</el-button>
    <el-button @click="resetSearch" type="warning">重置搜索</el-button>
  </div>
  <div class="table-data">
    <el-table :data="documents" @selection-change="selectDocument" height="75vh">
      <el-table-column prop="title" label="标题">
        <template #default="scope">
          <i :class="getIconClass(scope.row.title)"/>
          <span class="windows-open" @click="previewDocument(scope.row.id)">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" width="200" label="用户">
        <template #default="scope">
          <span class="windows-open" @click="toUserDocuments(scope.row.userId)">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="size" width="200" label="大小">
        <template #default="scope">
          {{ showSize(scope.row.size) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" width="200" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" width="200" label="上传时间"/>
      <el-table-column prop="updateTime" width="200" label="更新时间"/>
      <el-table-column prop="commentStatus" width="200" label="评论区状态">
        <template #default="scope">
          <el-tag :type="scope.row.commentStatus === '开启' ? 'success' : 'danger'">{{scope.row.commentStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-button @click="previewDocument(scope.row.id)">预览</el-button>
          <el-button @click="downloadDocument(scope.row.id)" type="warning">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="pageNumber" v-model:page-size="pageSize" :page-sizes="pageSizes"
                   :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"/>
  </div>
</template>

<style scoped lang="less">
.operation {
  display: flex;

  .el-input {
    margin-right: 10px;
    width: 200px;
  }

  .el-button {
    margin-right: 10px;
  }
}

.table-data {
  .iconfont {
    margin-right: 5px;
  }
  .windows-open:hover {
    text-decoration: underline;
  }
}

.page {
  z-index: 100;
  position: absolute;
  bottom: 50px;
  background: white;
}
</style>